<!--<template>-->
<!--  <div class="app-container">-->
<!--    &lt;!&ndash; 用户个人信息展示区域 &ndash;&gt;-->
<!--    <el-card class="box-card">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>个人信息</span>-->
<!--        <el-button-->
<!--            style="float: right;"-->
<!--            type="primary"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate"-->
<!--        >修改</el-button>-->
<!--      </div>-->
<!--      <div class="text item">-->
<!--        <el-row>-->
<!--          <el-col :span="8"><strong>用户ID:</strong> {{ form.userId }}</el-col>-->
<!--          <el-col :span="8"><strong>昵称:</strong> {{ form.nickName }}</el-col>-->
<!--          <el-col :span="8"><strong>邮箱:</strong> {{ form.email }}</el-col>-->
<!--          <el-col :span="8"><strong>手机号码:</strong> {{ form.phoneNumber}}</el-col>-->
<!--          <el-col :span="8"><strong>性别:</strong> {{ form.sex === '0' ? '男' : form.sex === '1' ? '女' : '未知'}}</el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->

<!--        </el-row>-->
<!--      </div>-->
<!--    </el-card>-->

<!--    &lt;!&ndash; 修改个人信息对话框 &ndash;&gt;-->
<!--    <el-dialog :title="userInfoTitle" v-model="open" width="500px">-->
<!--      <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="昵称" prop="nickName">-->
<!--          <el-input v-model="form.nickName" placeholder="请输入昵称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱" prop="email">-->
<!--          <el-input v-model="form.email" placeholder="请输入邮箱" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号码" prop="phonenumber">-->
<!--          <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <div class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="app-container">
    <!-- 用户个人信息展示区域 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="info-title">个人信息</h2>
      </div>
      <div class="info-content">
        <el-row :gutter="20" class="info-row" justify="start">
          <el-col :span="24" class="info-item"><strong>用户ID：</strong>{{ form.userId }}</el-col>
          <el-col :span="24" class="info-item"><strong>昵称：</strong>{{ form.nickName }}</el-col>
          <el-col :span="24" class="info-item"><strong>邮箱：</strong>{{ form.email }}</el-col>
          <el-col :span="24" class="info-item"><strong>手机号码：</strong>{{ form.phoneNumber }}</el-col>
          <el-col :span="24" class="info-item">
            <strong>性别：</strong>{{ form.sex === '0' ? '男' : form.sex === '1' ? '女' : '未知' }}
          </el-col>
        </el-row>
        <div class="button-wrapper">
          <div class="edit-btn-wrapper">
            <el-button
                class="edit-button"
                type="primary"
                icon="el-icon-edit"
                @click="handleUpdate"
            >
              修改
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 修改个人信息对话框 -->
    <el-dialog :title="userInfoTitle" v-model="open" width="500px">
      <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>
.custom-dialog {
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  width: 600px;
}

.custom-dialog .el-dialog__header {
  background-color: #f0f9eb;
  border-bottom: 1px solid #ebedf0;
  padding: 20px;
}

.custom-dialog .el-dialog__title {
  color: #67c23a;
  font-size: 22px;
  font-weight: bold;
}

.custom-dialog .el-row {
  margin-bottom: 20px;
}

.custom-dialog .el-col {
  color: #333;
  font-size: 16px;
}

.custom-dialog .el-col b {
  color: #606266;
  font-size: 18px;
}

.custom-dialog .el-col .el-row {
  margin-bottom: 10px;
}

.box-card {
  width: 100%;
}

.text {
  margin-top: 20px;
}

.item {
  margin-bottom: 10px;
}

.dialog-footer {
  text-align: right;
}



.app-container {
  padding: 20px;
}

.info-card {
  width: 100%;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
}

.card-header {
  background-color: #409EFF;
  padding: 16px 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center; /* ✅ 居中标题 */
}

.info-title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: inline-block;
}

.info-content {
  padding: 0 10px;
}

.info-row {
  margin-bottom: 20px;
}

.info-item {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
}

.button-wrapper {
  text-align: center;
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}


.edit-btn-wrapper {
  margin-top: 30px;
  text-align: center;
}
.edit-button {
  font-size: 16px;
  padding: 10px 20px;
  height: auto;
  border-radius: 8px;
}

</style>

<script setup>
import { getMyInfo, updateUserInfo } from "@/api/match/UserInfo";
import { ref, reactive, toRefs, onMounted } from "vue";

const { proxy } = getCurrentInstance();

const open = ref(false);
const loading = ref(true);
const userInfoTitle = ref("查看个人信息");

const data = reactive({
  form: {
    userId: null,
    userName: "",
    nickName: "",
    email: "",
    phoneNumber: "",
    sex: ""
  },
  rules: {
    userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    nickName: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phoneNumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  }
});

const { form, rules } = toRefs(data);

// 获取当前用户信息
const getUserInfo = async () => {
  try {
    const response = await getMyInfo();
    if (response.code === 200) {
      form.value = { ...response.data }; // 将当前用户信息赋值到表单
    } else {
      proxy.$message.error('获取用户信息失败');
    }
  } catch (error) {
    proxy.$message.error('请求失败');
  }
};

// 打开修改对话框并填充数据
const handleUpdate = () => {
  open.value = true; // 打开修改对话框
};

// 提交表单
const submitForm = () => {
  proxy.$refs["userRef"].validate(valid => {
    if (valid) {
      updateUserInfo(form.value).then(response => {
        if (response.code === 200) {
          proxy.$message.success("修改成功");
          open.value = false; // 关闭对话框
          getUserInfo(); // 刷新用户信息
        } else {
          proxy.$message.error(response.message || "修改失败");
        }
      }).catch(() => {
        proxy.$message.error('请求失败');
      });
    }
  });
};

// 取消修改
const cancel = () => {
  open.value = false;
  reset();
};

// 重置表单
const reset = () => {
  form.value = {
    userId: null,
    userName: "",
    nickName: "",
    email: "",
    phoneNumber: ""
  };
  proxy.resetForm("userRef");
};

// 页面加载时查询用户信息
onMounted(() => {
  getUserInfo(); // 页面加载时查询当前用户信息
});
</script>
